<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁易购</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
</head>

<body>
    <!-- 头部搜索模块 -->
    <div class="search-content">
        <div class="search-hd">
            <a href="#" class="classify"></a>
            <div class="header-pic">
                <img src="images/xianli.gif" alt="">
            </div>
            <a href="#" class="login"></a>
        </div>
        <div class="search-bd">
            <input type="text" value="iPhone 12最高省1100">
        </div>
    </div>
    <!-- 轮播图模块 -->
    <div class="swiper-img">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#">
                        <img src="upload/swiper-pic1.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="upload/swiper-pic2.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="upload/swiper-pic3.png" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="upload/swiper-pic4.png" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="upload/swiper-pic5.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <img src="upload/swiper-pic6.png" alt="">
                    </a>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

    </div>
    <!-- 广告模块 -->
    <div class="ad">
        <ul>
            <li>
                <a href="#">
                    <img src="upload/ad1.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/ad2.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/ad3.png" alt="">
                </a>
            </li>
        </ul>
    </div>
    <!-- 导航栏模块 -->
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <img src="images/nav1.png" alt="">
                    <p>苏宁秒杀</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav2.png" alt="">
                    <p>苏宁超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav3.png" alt="">
                    <p>苏宁拼购</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav4.png" alt="">
                    <p>手机数码</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav5.png" alt="">
                    <p>苏宁家电</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav6.png" alt="">
                    <p>免费水果</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav7.png" alt="">
                    <p>super会员</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav8.png" alt="">
                    <p>签到有礼</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav9.png" alt="">
                    <p>领卷中心</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/nav10.png" alt="">
                    <p>更多频道</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="newcomer">
        <a class='newItem1' href="#">
            <img src="upload/new1.png" alt="">
        </a>
        <a class='newItem2' href="#">
            <img src="upload/new2.gif" alt="">
        </a>
        <a class='newItem3' href="#">
            <img src="upload/new3.gif" alt="">
        </a>
    </div>
    <!-- 秒杀模块 -->
    <div class="miaosha-area">
        <div class="miaosha-left-area left-right-area">
            <div class="title">限时秒杀</div>
            <p class="desc">人气好货限时抢</p>
            <ul>
                <li class="left">
                    <a href="#">
                        <img src="upload/haitai.jpg" alt="">
                        <p class="price">
                            <span>¥</span>
                            <span>3</span>
                            <span>.59</span>
                        </p>
                    </a>
                </li>
                <li class="right">
                    <a href="#">
                        <img src="upload/jvhuacha.jpg" alt="">
                        <p class="right-price">
                            <span>¥</span>
                            <span>7</span>
                            <span>.8</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="miaosha-right-area left-right-area">
            <div class="title">大聚惠</div>
            <p class="desc">聚优品·惠生活</p>
            <ul>
                <li class="left">
                    <a href="#">
                        <img src="upload/airpods.webp" alt="">
                        <p class="left-price">
                            <span>¥</span>
                            <span>3</span>
                            <span>.59</span>
                        </p>
                    </a>
                </li>
                <li class="right">
                    <a href="#">
                        <img src="upload/flyco.webp" alt="">
                        <p class="right-price">
                            <span>¥</span>
                            <span>7</span>
                            <span>.8</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="miaosha-left-area left-right-area">
            <div class="title">新品首发</div>
            <p class="desc">大牌新机0元试</p>
            <ul>
                <li class="left">
                    <a href="#">
                        <img src="upload/phone1.webp" alt="">
                    </a>
                </li>
                <li class="right">
                    <a href="#">
                        <img src="upload/phone2.webp" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="miaosha-right-area left-right-area">
            <div class="title">苏宁拼购</div>
            <p class="desc">2人拼更实惠 全场包邮</p>
            <ul>
                <li class="left">
                    <a href="#">
                        <img src="upload/medicin.webp" alt="">
                    </a>
                </li>
                <li class="right">
                    <a href="#">
                        <img src="upload/machine.webp" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 推荐模块 -->
    <div class="recommend">
        <div class="title-area">
            <a href="#">
                <p class="title">为你推荐</p>
                <p class="desc">精选频道</p>
            </a>
        </div>
        <ul>
            <li>
                <a href="#">
                    <img src="upload/recmd1.webp" alt="">
                    <p>苏宁国际</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/recmd2.webp" alt="">
                    <p>苏宁Outlets</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/recmd3.png" alt="">
                    <p>会员抢购</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="upload/recmd4.png" alt="">
                    <p>Super会员</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="recommended-list">
        <!-- 推荐榜单1 -->
        <div class="recmd-area1">
            <div class="recmd-list-hd">
                <img src="images/recmd-litst-title.png" alt="">
            </div>
            <div class="recmd-list-bd">
                <ul>
                    <li>
                        <a href="#">
                            <img class="good" src="upload/recmd-list1.webp" alt="">
                            <img class="bg" src="images/recmd-list-bg1.png" alt="">
                            <p class="three-name">人气榜</p>
                            <p class="three-title">清洁洗发水榜</p>
                            <p class="three-desc">卖爆3.5万件</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="good" src="upload/recmd-list3.webp" alt="">
                            <img class="bg" src="images/recmd-list-bg1.png" alt="">
                            <p class="three-name">人气榜</p>
                            <p class="three-title">除菌洗衣皂榜</p>
                            <p class="three-desc">卖爆9563件</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="good" src="upload/recmd-list2.webp" alt="">
                            <img class="bg" src="images/recmd-list-bg1.png" alt="">
                            <p class="three-name">人气榜</p>
                            <p class="three-title">安全耐摔奶瓶榜</p>
                            <p class="three-desc">卖爆4661件万件</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 推荐榜单2 -->
        <div class="recmd-area2">
            <div class="recmd-list-left-area left-right-area">
                <div class="title">高效驱蚊驱虫榜</div>
                <p class="desc">本月趋势上升155%</p>
                <ul>
                    <li class="left">
                        <a href="#">
                            <img src="upload/recmd-list4.webp" alt="">
                            <p class="price">
                                <span>¥</span>
                                <span>3</span>
                                <span>.59</span>
                            </p>
                        </a>
                    </li>
                    <li class="right">
                        <a href="#">
                            <img src="upload/recmd-list5.webp" alt="">
                            <p class="right-price">
                                <span>¥</span>
                                <span>7</span>
                                <span>.8</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="recmd-list-right-area left-right-area">
                <div class="title">品质书写榜</div>
                <p class="desc">卖爆4233件</p>
                <ul>
                    <li class="left">
                        <a href="#">
                            <img src="upload/recmd-list6.webp" alt="">
                            <p class="left-price">
                                <span>¥</span>
                                <span>3</span>
                                <span>.59</span>
                            </p>
                        </a>
                    </li>
                    <li class="right">
                        <a href="#">
                            <img src="upload/recmd-list7.webp" alt="">
                            <p class="right-price">
                                <span>¥</span>
                                <span>7</span>
                                <span>.8</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="recmd-list-left-area left-right-area">
                <div class="title">静音滋润加湿榜</div>
                <p class="desc">卖爆908件</p>
                <ul>
                    <li class="left">
                        <a href="#">
                            <img src="upload/recmd-list8.webp" alt="">
                        </a>
                    </li>
                    <li class="right">
                        <a href="#">
                            <img src="upload/recmd-list9.webp" alt="">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="recmd-list-right-area left-right-area">
                <div class="title">优选运动护具榜</div>
                <p class="desc">卖爆899件</p>
                <ul>
                    <li class="left">
                        <a href="#">
                            <img src="upload/recmd-list10.webp" alt="">
                        </a>
                    </li>
                    <li class="right">
                        <a href="#">
                            <img src="upload/recmd-list11.webp" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="goods-list">
        <!-- 头部部分 -->
        <a class='goods-hd' href="#">
            <img src="images/like.webp" alt="">
        </a>
        <!-- 主体部分 -->
        <div class="goods-bd">
            <ul class="left-list">
                <li>
                    <a href="#">
                        <img class="goods-pic" src="upload/goods1.webp" alt="">
                        <h1>【含GOS】贝拉米(Bellamy's) 幼儿配方奶粉 3段 (1-3岁） 900g/罐</h1>
                        <p class="cuxiao-tag">
                            <img src="images/left-logo.png" alt="" class="left-logo">
                            <span class="dajvhui">大聚惠</span>
                        </p>
                        <div class="price-comment">
                            <div class="price">
                                <span>¥</span>
                                <span>19</span>
                                <span>.59</span>
                            </div>
                            <div class="comment">
                                <span>1700+评价</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="goods-pic" src="upload/goods1.webp" alt="">
                        <h1>【含GOS】贝拉米(Bellamy's) 幼儿配方奶粉 3段 (1-3岁） 900g/罐</h1>
                        <p class="cuxiao-tag">
                            <img src="images/left-logo.png" alt="" class="left-logo">
                            <span class="dajvhui">大聚惠</span>
                        </p>
                        <div class="price-comment">
                            <div class="price">
                                <span>¥</span>
                                <span>19</span>
                                <span>.59</span>
                            </div>
                            <div class="comment">
                                <span>1700+评价</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="goods-pic" src="upload/goods1.webp" alt="">
                        <h1>【含GOS】贝拉米(Bellamy's) 幼儿配方奶粉 3段 (1-3岁） 900g/罐</h1>
                        <p class="cuxiao-tag">
                            <img src="images/left-logo.png" alt="" class="left-logo">
                            <span class="dajvhui">大聚惠</span>
                        </p>
                        <div class="price-comment">
                            <div class="price">
                                <span>¥</span>
                                <span>19</span>
                                <span>.59</span>
                            </div>
                            <div class="comment">
                                <span>1700+评价</span>
                            </div>
                        </div>
                    </a>
                </li>

            </ul>
            <ul class="right-list">
                <li>
                    <a href="#">
                        <img class="goods-pic" src="upload/goods3.webp" alt="">
                        <h1>古越龙山 绍兴黄酒 花雕酒糯米酒 半甜型 清醇三年 500ml*6瓶 整箱装 送礼佳品</h1>
                        <p class="cuxiao-tag">
                            <img src="images/right-logo.png" alt="" class="right-logo">
                            <span class="dajvhui">大聚惠</span>
                            <span class="discount">满一件打九折</span>
                        </p>
                        <div class="price-comment">
                            <div class="price">
                                <span>¥</span>
                                <span>65</span>
                            </div>
                            <div class="comment">
                                <span>3.5万+评价</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="goods-pic" src="upload/goods3.webp" alt="">
                        <h1>古越龙山 绍兴黄酒 花雕酒糯米酒 半甜型 清醇三年 500ml*6瓶 整箱装 送礼佳品</h1>
                        <p class="cuxiao-tag">
                            <img src="images/right-logo.png" alt="" class="right-logo">
                            <span class="dajvhui">大聚惠</span>
                            <span class="discount">满一件打九折</span>
                        </p>
                        <div class="price-comment">
                            <div class="price">
                                <span>¥</span>
                                <span>65</span>
                            </div>
                            <div class="comment">
                                <span>3.5万+评价</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img class="goods-pic" src="upload/goods3.webp" alt="">
                        <h1>古越龙山 绍兴黄酒 花雕酒糯米酒 半甜型 清醇三年 500ml*6瓶 整箱装 送礼佳品</h1>
                        <p class="cuxiao-tag">
                            <img src="images/right-logo.png" alt="" class="right-logo">
                            <span class="dajvhui">大聚惠</span>
                            <span class="discount">满一件打九折</span>
                        </p>
                        <div class="price-comment">
                            <div class="price">
                                <span>¥</span>
                                <span>65</span>
                            </div>
                            <div class="comment">
                                <span>3.5万+评价</span>
                            </div>
                        </div>
                    </a>
                </li>

            </ul>
        </div>
    </div>

    <div class="footer">
        <ul>
            <li>
                <a href="#">
                    <img src="images/footer-pic1.png" alt="">
                    <p class="current">首页</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/footer-pic2.png" alt="">
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/footer-pic3.png" alt="">
                    <p>排行榜</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/footer-pic4.png" alt="">
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/footer-pic5.png" alt="">
                    <p>我的易购</p>
                </a>
            </li>
        </ul>

    </div>
</body>

<script>
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
</script>

</html>